<template>
  <div class="common_bg">
    <div v-if="type == 1 && bannerList.length > 0" class="banner_bg">
      <Banner ref="banner" @imgEnd="commonEnd" :bannerList = "bannerList"></Banner>
    </div>

    <div v-show="type == 2" class="player_bg">
      <div v-for="(item, i) in videoList">
        <Video :ref="`video`" @playerEnd="handlePlayerEnd" v-show="videoIndex == i" :videoIndex="i" :videoSrc="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import Video from '@/views/player/components/video'
import Banner from '@/views/banner/index.vue'

export default {
  name: "",
  props: {
    type: {
      default: 1,//1：图片 2：视频
    }, 
    bannerList: {
      type: Array,
      default: () => []
    },
    videoList: {
      type: Array,
      default: () => []
    },
  },
  components: {
    Video,
    Banner,
  },
  data() {
    return {
      videoIndex: 0,
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    handlePlayerEnd() {
      if (this.videoIndex == (this.videoList.length - 1)) {
        this.videoIndex = 0

        this.$emit('commonEnd')
      } else {
        this.videoIndex ++ 
        this.$refs['video'][this.videoIndex].playVideo()
      }
    },
    restart() {
      this.videoIndex = 0
      if (this.$refs['video'][this.videoIndex].playVideo()) {
        this.$refs['video'][this.videoIndex].playVideo()
      }
      
    },
    commonStart() {
      if (this.type == 1) {
        this.$refs.banner.startPlay()
      } else {
        this.restart()
      }
    },
    commonEnd() {
      this.$emit('commonEnd')
    },
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .common_bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .banner_bg {
    width: 100%;
    height: 100%;
  }

  .player_bg {
    width: 100%;
    height: 100%;
  }

</style>